<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 590px;
				height: 470px;
				border: 4px solid green;
				margin: 50px auto;
				/*
				 设置相对定位
				 如果希望让图片作为参照物的话，那么必须让长辈是相对定位，让后辈是绝对定位
				 1:一般情况下，都是用绝对定位，基本上不适用相对定位
				 a：因为相对定位，会占据位置
				 b：绝对定位不会占据位置。
				 c：只有一种情况，是在寻找原点的时候，或者叫做，以某个元素作为参照物的时候，才会使用相对定位
				 * */
				position: relative;
			}
			.left{
				width: 50px;
				height: 90px;
				background: pink;
				position: absolute;
				left: 0px;
				top: 50%;
				/*
				 设置成自身高度的一半
				 * */
				margin-top: -45px;
			}
			.right{
				width: 50px;
				height: 90px;
				background: pink;
				position: absolute;
				right: 0px;
				top: 50%;
				/*
				 设置成自身高度的一半
				 * */
				margin-top: -45px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/xlx.jpg"/>
			<span class="left"></span>
			<span class="right"></span>
		</div>
	</body>
</html>
